{% layout none %}

{% assign formatted_initial_value = gift_card.initial_value | money_without_trailing_zeros: gift_card.currency %}
{% assign formatted_initial_value_stripped = formatted_initial_value | strip_html %}

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="format-detection" content="telephone=no">

  <title>{{ 'gift_cards.issued.title' | t: value: formatted_initial_value_stripped, shop: shop.name }}</title>
  <meta name="description" content="Here's your gift card!">

  {{ 'gift-card.css' | shopify_asset_url | stylesheet_tag }}
  {{ 'modernizr.gift-card.js' | shopify_asset_url | script_tag }}
  <link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">

  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <script type='text/javascript'>
    function selectText(element) {

        var doc = document;
        var text = doc.getElementById(element);

        if (doc.body.createTextRange) { // ms
            var range = doc.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) { // moz, opera, webkit
            var selection = window.getSelection();
            var range = doc.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }

    }
  </script>

</head>

<body>

  <div class="wrap">

    <header role="banner" id="header">
      <a href="{{ shop.url }}" class="logo">{{ shop.name }}</a>
      <a href="{{ shop.url }}" class="shop-url">{{ shop.url | remove: 'http://' }}</a>
    </header>

      <main role="main">

          <div id="gift-card-outer-container" {% if gift_card.expired or gift_card.enabled != true %}class="disabled"{% endif %}>
            <div id="gift-card-inner-container">

              <header id="gift-card-header">
                <h2>{{ 'gift_cards.issued.subtext' | t }}</h2>
                {% unless gift_card.enabled %}
                  <span class="tag">{{ 'gift_cards.issued.disabled' | t }}</span>
                {% endunless %}
                {% assign gift_card_expiry_date = gift_card.expires_on | date: "%d/%m/%y" %}
                {% if gift_card.expired and gift_card.enabled %}
                   <span class="tag">{{ 'gift_cards.issued.expired' | t: expiry: gift_card_expiry_date }}</span>
                {% endif %}
                {% if gift_card.expired != true and gift_card.expires_on and gift_card.enabled %}
                  <span class="tag light">{{ 'gift_cards.issued.active' | t: expiry: gift_card_expiry_date }}</span>
                {% endif %}
              </header>

              <div id="gift-card-holder">
                <div class="corner top-left"></div>
                <div class="corner bottom-right"></div>
                <div class="corner top-right"></div>
                <div class="corner bottom-left"></div>
                <div id="gift-card">
                  <img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="Gift card illustration">
                  {% assign initial_value_size = formatted_initial_value | size %}
                  <div id="gift-card-amount" class="{% if initial_value_size > 6 %}medium{% endif %}">
                    {% if gift_card.balance != gift_card.initial_value %}
                      <span class="tooltip-container"><span class="tooltip-label">{{ gift_card.balance | money }} <small>left</small></span><span class="tooltip-triangle"></span></span>
                    {% endif %}
                    <strong>{{ formatted_initial_value }}</strong>
                  </div>
                  {% assign code_size = gift_card.code | format_code | size %}
                  <div id="gift-card-code-outer" class="{% if code_size <= 25 %}large{% elsif code_size > 25 and code_size <= 30 %}medium{% else %}small{% endif %}" onclick="selectText('gift-card-code-digits');">
                    <div id="gift-card-code-inner">
                      <strong id="gift-card-code-digits">{{ gift_card.code | format_code }}</strong>
                    </div>
                  </div>
                </div>
              </div>

              <div id="gift-card-instructions">
                <p>{{ 'gift_cards.issued.redeem' | t }}</p>
              </div>

              <div id="gift-card-actions">
                <a href="{{ shop.url }}" class="btn center" target="_blank">{{ 'gift_cards.issued.shop_link' | t }}</a>
                <a href="#" class="action-link left" onclick="window.print();"><i class="ico-16 print"></i>{{ 'gift_cards.issued.print' | t }}</a>
              </div>

            </div>
          </div>
      </main> <!-- / Main -->

      <footer role="contentinfo">
        <img src="{{ 'gift-card/icon-bug.png' | shopify_asset_url }}" class="gift-card-icon">
      </footer>

    </div>

</body>
</html>
